<%@ page contentType="text/html; charset=UTF-8"%>
<%@page import="com.sinodata.bsm.center.cache.DimensionTypeCache"%>
<%@page import="com.sinodata.bsm.center.util.spring.SpringContextHolder"%>
<%@page import="java.util.List"%>
<%@page import="com.sinodata.bsm.common.vo.DimensionType"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="com.sinodata.bsm.center.cache.DimensionCache"%>
<%@page import="com.sinodata.bsm.common.vo.Dimension"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<%
         DimensionTypeCache dimensionTypeCache=SpringContextHolder.getBean(DimensionTypeCache.class);
         List<DimensionType> dimensionTypeList = dimensionTypeCache.getAll();
 		 Map<String, List<Dimension>> dimensionMap = new HashMap<String, List<Dimension>>();
 		 DimensionCache dimensionCache=SpringContextHolder.getBean(DimensionCache.class);
		 for (DimensionType dimensionType : dimensionTypeList) {
			List<Dimension> dimensionList = dimensionCache
					.getDimensionByType(dimensionType.getId());
			dimensionMap.put("key" + dimensionType.getId(), dimensionList);
		 }
		 JSONObject dimensionJson = JSONObject.fromObject(dimensionMap);
		 request.setAttribute("dimensionMap", dimensionJson);
         request.setAttribute("dimensionTypeList",dimensionTypeList);
    %>
	<head>
		<title>可用性管理</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<%@ include file="../include/common.jsp"%>
		<%@ include file="../include/table.jsp"%>
		<%@ include file="../include/jbox.jsp"%>
		<%@ include file="../include/form.jsp"%>
        <link rel="stylesheet" media="all" type="text/css" href="${pageContext.request.contextPath}/style/default/bsm/res_dimension.css" />
		<script type="text/javascript">
		//**************新增维度JS代码*********************
		var dimensions=new Array();//保存所有的维度对象
		//添加行
		function addRow(){
		  var indexValue=dimensions.length;
		  var tr=$('#copyDimension').html().replace('del(i)','del('+indexValue+')')
		                                   .replace('updateTr(i','updateTr('+indexValue)
		                                   .replace('updateTr(i','updateTr('+indexValue)
		                                   .replace('cbTypei','cbType'+(indexValue)+'')
		                                   .replace('cbTypei','cbType'+(indexValue)+'')
		                                   .replace('dimensionType','dimensionType'+(indexValue)+'');                     
		  var dimension=$('#dimensionTable tbody tr:last-child');
		  dimension.before('<tr id="dimensionRow" name="dimensionRow" class="odd" delIndex="'+indexValue+'" >'+tr+'</tr>');
		  var typeid=$("#dimensionType"+indexValue+" option:selected").val();
		  dimensions.push(tr);
	  }
	  
	  //构建表格
	  function buildTable(){
	  	 var indexValue=dimensions.length;
	     var topDimension="";
	     var lefDimension="";
	     var topNumber=0;
	     var leftNumber=0;
	     //校验判断
	      $("#dimensionTable").find("select[id!='dimensionType']")
	         .each(function(){
	         var radioname=$(this).attr("id").replace('dimensionType','cbType');
	       	 var choiceType=$("input:radio[name='"+radioname+"']:checked").val();
	       	 //判断选择的维度存在重复
	         if(topDimension.indexOf($(this).val())>-1
	           || lefDimension.indexOf($(this).val())>-1){
	                $.jBox.alert('您选择的维度存在重复，请重新选择','提示');
	                return;
	         }
	         if(choiceType=="1"){
	            topDimension+=$(this).val()+",";
	            topNumber++;
	         }
	         //左边
	         if(choiceType=="0"){
	            lefDimension+=$(this).val()+",";
	            leftNumber++;
	         }
	      });
	      //全部为行或为列的判断
	     if(leftNumber==indexValue 
	      || topNumber==indexValue){
	          $.jBox.alert('您选择的行列不符合规范，请重新选择','提示');
	          return;
	     }
			 $.ajax({
					type:'post',
					url:'${pageContext.request.contextPath}/resource/res-usability!buildTable.action?topDimension='+topDimension+'&lefDimension='+lefDimension,
					global:false,
					async:false,
					cache:false,
					dataType:'json',
					success:function(data,textStatus){
					   		//先删除之前的表格
					    var topDiv=$("#dimensionTopTable");
					    topDiv.empty();
					    topDiv.append(data.topHead);
					    var lefDiv=$("#dimensionleftDiv");
					    lefDiv.empty();
					    lefDiv.append(data.leftHead);
					    var topLeft=$("#dimensiontopLeft");
					    var rownumber=data.leftdimensionNum;
					    var colnumber=data.topdimensionNum;
					    var table=$("#dimensiontableContent");
					    table.empty();
					    //构建中间数据部分
					    for(var i=0;i<rownumber;i++){
					        var tr="<tr>";
					        for(var j=0;j<colnumber;j++){
					           tr+="<td></td>";
					        }
					        tr+="</tr>";
					        table.append(tr);
					    }
					    table.show();
					    //处理高度不统一的情况 暂定了四层 理论上应该更灵活
					    setWidthDiv("Text");
					    setWidthSpan("secondDiv");
					    setWidthSpan("third");
					    setWidthSpan("last");
					    //左上角Div高度设置
					    topLeft.css("height", topDiv.height()-2).css("width",lefDiv.width()-1);
					},
					error:function(){
						$.jBox.alert('服务器内部错误,请联系管理员','错误');
					}
			});
		}
		//设置Div
		function setWidthDiv(className){
		    var maxwidth=0;
		    $("."+className).each(function(){ 
		         if($(this).width()>maxwidth){
					     maxwidth=$(this).width();
				   }
		    });
		    $("."+className).each(function(){ 
				  $(this).width(maxwidth);
			 });
		}
		//设置span
		function setWidthSpan(className,type){
		       var maxwidth=0;
		   	   $("."+className).find("span").each(function(){ 
					    if($(this).width()>maxwidth){
					          maxwidth=$(this).width();
					      }
			  });
			 $("."+className).find("span").each(function(){ 
					      $(this).width(maxwidth);
			  });
			  
		}
		//删除
	    function del(iRow){
		  var scheduleRow=$("#dimensionTable tbody tr[name='dimensionRow']");
		  if(scheduleRow.length>0){
		    var n=0;
		    $.each(scheduleRow,function(index,ob){
		        //删除保存在全局变量dimensions里面的调度方式
		        if($(ob).attr('delIndex')==iRow){
		           $(ob).remove();
		        }
		        if(dimensions[index]!=dimensions[iRow]){
		           dimensions[n++]=dimensions[index];
		        }
		    });
		 }
	   }
	   // 维度上下互换位置
	   function updateTr(iRow,state){
	      var indexValue=dimensions.length;
	      var scheduleRow=$("#dimensionTable tbody tr[name='dimensionRow']");
		  if(scheduleRow.length>0){
		    $.each(scheduleRow,function(index,ob){
		        //删除保存在全局变量dimensions里面的调度方式
		       if($(ob).attr('delIndex')==iRow){
		        var tr=dimensions[iRow];
		        if(state=="up"){
                  if ($(ob).index() != 0) {
                      $(ob).prev().before($(ob));
                      dimensions[iRow]= dimensions[iRow-1];
                      dimensions[iRow-1]=tr;
                  }
                 }
                if(state=="down"){
                  if ($(ob).index() != indexValue - 1) {                      
                       $(ob).next().after($(ob));
                      dimensions[iRow]= dimensions[iRow+1];
                      dimensions[iRow+1]=tr;
                  }
               }
		      }
		    });
	      }
	    }
		</script>
	</head>

	<body>
		<!-- 可用性设置 -->
		<h2 class="title-h2">
			<span><img
					src="${pageContext.request.contextPath}/style/default/bsm/images/arrow-down.gif" />
			</span>资源【大小额支付系统】可用性设置
		</h2>
		<div id="topDiv">
			<table class="table_eidt" id="restable">
				<tr id="dimensionTr">
					<td class="td_left">
						<span class="span_alert">*</span> 可用性维度
					</td>
					<td class="td_right">
						<div id="scheduleInfo">
							<div class="toolbar" id="toolbar">
								<a href="javascript:;" class="page_add" onclick="addRow()">新增维度</a>
							</div>
							<table class="display dataTable" id="dimensionTable"
								cellpadding="0" cellspacing="0">
								<thead>
									<tr role="row">
										<th style="width: 150px;">操作</th>
										<th style="width: 350px;">维度类型</th>
									</tr>
								</thead>
								<tbody>
									<tr id="copyDimension" style="display: none;">
										<td style="text-align: center;">
											<a href="#" onclick="del(i)"><img
													src='${pageContext.request.contextPath}/style/default/bsm/images/delete.gif'
													title='删除' /> </a>
											<a href="#" onclick="updateTr(i,'up')"><img
													src='${pageContext.request.contextPath}/style/default/bsm/images/up.gif'
													title='上升' /> </a>
											<a href="#" onclick="updateTr(i,'down')"><img
													src='${pageContext.request.contextPath}/style/default/bsm/images/down.gif'
													title='下降' /> </a>
										</td>
										<td style="padding-left: 4px;">
											<select id="dimensionType" name="dimensionType"
												style="width: 220px;" class="input_text">
												<c:forEach var="dimensionType" items="${dimensionTypeList}">
													<option value="${dimensionType.id}">
														${dimensionType.dimensionTypeName}
													</option>
												</c:forEach>
											</select>
											<input type="radio" value="1" name="cbTypei" checked="checked"/>行
											<input type="radio" value="0" name="cbTypei"/>列
										</td>
										<td style="padding-left: 4px;">
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</td>
				</tr>
			</table>
			<div class="btn-div">
				<button type="button" id="saveBt" value="保存" class="btn-4"
					onclick="buildTable()">
					可用性查询
				</button>
				<button type="button" onclick="back()" class="btn-4">
					返回
				</button>
			</div>
		</div>
		<!-- 可用性结果 -->
		<h2 class="title-h2" onclick="accordionDiv(this)">
			<span><img
					src="${pageContext.request.contextPath}/style/default/bsm/images/arrow-down.gif" />
			</span>可用性结果展示
		</h2>
		<div id="dimensionUsabilityDiv">
			<div class="topDiv" id="dimensiontopDiv">
				<div class="topLeft" id="dimensiontopLeft"></div>
				<table class="topTable" cellpadding="0" cellspacing="0" id="dimensionTopTable">
				</table>
			</div>
			<div>
				<div class="leftDiv" id="dimensionleftDiv">
				</div>
				<table class="content" cellpadding="0" cellspacing="0"
					id="dimensiontableContent" style="display: none">
				</table>
			</div>
		</div>
	</body>
</html>
